<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>我的文章</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="72x72"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="YeZi Guo" />
<link rel="apple-touch-icon-precomposed"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage"
	content="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="${ctxPath}/assets/css/amazeui.min.css">
<link rel="stylesheet" href="${ctxPath}/assets/css/app.css">
<link rel="stylesheet" href="${ctxPath}/assets/css/admin.css">
<script src="${ctxPath}/assets/js/jquery.min.js"></script>



<style type="text/css">
#pageView {
	color: red;
	font-size: 0.8em;
	font-weight: bold;
}

.font {
	font-size: 1em;
}

#user {
	color: gray;
	font-size: 0.9em;
}

.username {
	color: red;
}

#frame {
	margin-left: 5%;
	margin-right: 5%;
}

#btn {
	margin-left: 40%;
}

#ue {
	width: 50em;
}
</style>
</head>

<body id="blog">

	<header class="am-g am-g-fixed blog-fixed blog-text-center blog-header">
		<div class="farme am-u-sm-8 am-u-sm-centered">
			<img width="200" src="${ctxPath}/assets/i/YeZiGuo.png"
				alt="Amaze UI Logo" />
			<h2 class="am-hide-sm-only">随便写!</h2>
		</div>
	</header>
	<hr>
	<!-- nav start -->
	<nav class="am-g am-g-fixed blog-fixed blog-nav">
		<button
			class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button"
			data-am-collapse="{target: '#blog-collapse'}">
			<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
		</button>

		<div class="farme am-collapse am-topbar-collapse" id="blog-collapse">
			<ul class="am-nav am-nav-pills am-topbar-nav">
				<li><a href="${ctxPath}/index">首页</a></li>
				<li class="am-dropdown" data-am-dropdown><a
					class="am-dropdown-toggle" data-am-dropdown-toggle
					href="javascript:;"> 布局 <span class="am-icon-caret-down"></span>
				</a>
					<ul class="am-dropdown-content">
						<li><a href="${ctxPath}/index">1. 默认</a></li>
						<li><a href="${ctxPath}/index-nosidebar">2. 电脑版</a></li>
						<li><a href="${ctxPath}/index-noslider">3. 手机版</a></li>
					</ul></li>
				<li><a href="#">新功能正在搭建...</a></li>


				<li><% var user = session.user; if(user!=null){ %></li>
				<li><a href="#">我的图片库</a></li>
				<li class="am-dropdown" data-am-dropdown><a
					class="am-dropdown-toggle" data-am-dropdown-toggle
					href="javascript:;"> 个人中心 <span class="am-icon-caret-down"></span>
				</a>
					<ul class="am-dropdown-content">
						<li class="am-active"><a href="${ctxPath}/article/list">我发表的文章</a></li>
						<li><a href="${ctxPath}/article/save">发表新文章</a></li>
						<li><a href="#">修改密码</a></li>
						<li><a href="#">注销</a></li>
					</ul></li>
				<li><a id="user">欢迎您: <span class="username">${user.username}</span>
						<% } %>
				</a></li>


			</ul>
			<form class="am-topbar-form am-topbar-right am-form-inline"
				role="search">
				<div class="farme am-form-group">
					<input type="text" class="am-form-field am-input-sm"
						placeholder="搜索">
				</div>
			</form>
		</div>
	</nav>
	<hr>
	<!-- nav end -->
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->



	<div class="admin-content" id="frame">
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">我的文章</strong> / <small>列表</small>
				</div>
			</div>

			<hr>

			<div class="am-g">
				<div class="am-u-sm-12 am-u-md-6">
					<div class="am-btn-toolbar">
						<div class="am-btn-group am-btn-group-xs">
							<a href="${ctxPath}/article/save"><button type="button"
									class="am-btn am-btn-default">
									<span class="am-icon-plus"></span> 新增
								</button></a> <a href="#"><button type="button"
									class="am-btn am-btn-default">
									<span class="am-icon-trash-o"></span> 删除
								</button></a>
						</div>
					</div>
				</div>

<!-- <div class="am-form-group">
				<div class="am-u-sm-9">
					<select data-am-selected="{searchBox: 1}" >
						<option value="a">-The.CC</option>
						<option value="b">夕风色</option>
						<option value="o">Orange</option>
					</select>
				</div>
</div> -->
				<div class="am-u-sm-12 am-u-md-3">
					<div class="am-form-group">
				<div class="am-u-sm-9">
					<select data-am-selected="{searchBox: 1}" name="typeId" id="typeId">
							<option value="-1">所有类别</option> <% for(var type in typeList!){ %>
							<option value="${type.id}">${type.name}</option> <% } %>
						</select>
						</div>
					</div>
				</div>
				<div class="am-u-sm-12 am-u-md-3">
					<div class="am-input-group am-input-group-sm">
						<input type="text" class="am-form-field" id="title"> <span
							class="am-input-group-btn">
							<button class="am-btn am-btn-default" type="button"
								onclick="seek()">搜索</button>
						</span>
					</div>
				</div>
			</div>



			<table class="am-table am-table-striped am-table-hover table-main">
				<thead>
					<tr>
						<th class="table-check"><input type="checkbox" /></th>
						<th class="table-id">序号</th>
						<th class="table-title">标题</th>
						<th class="table-type">文章类型</th>
						<th class="table-date am-hide-sm-only">发表日期</th>
						<th class="table-date am-hide-sm-only">修改日期</th>
						<th class="table-date am-hide-sm-only">浏览量</th>
						<th class="table-set">操作</th>
					</tr>
				</thead>
				<tbody>
					<% for(var a in articleList.list!){ %>
					<tr>
						<td><input type="checkbox" /></td>
						<td>${aLP.index}</td>
						<td><a href="#">${a.title}</a></td>
						<td>${a.type}</td>
						<td>${a.create_time,"yyyy-MM-dd hh:mm:ss"}</td>
						<td>${a.modify_time,"yyyy-MM-dd hh:mm:ss"}</td>
						<td>${a.pageView}</td>
						<td>
							<div class="am-btn-toolbar">
								<div class="am-btn-group am-btn-group-xs">
									<a href="admin_toUpdateArcicle?id=${a.id}"><button
											class="am-btn am-btn-default am-btn-xs am-text-secondary">
											<span class="am-icon-pencil-square-o"></span> 编辑
										</button></a> <a href="#"><button onclick="deleteArticle('${a.id}')"
											class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only">
											<span class="am-icon-trash-o"></span> 删除
										</button></a>
								</div>
							</div>
						</td>
					</tr>
					<% } %>
				</tbody>
			</table>

			<div class="am-cf">
				共 ${articleList.totalCount} 条记录
				<div class="am-fr">
					<ul class="am-pagination">

						<% var totalPage=articleList.totalPage; var
						pageNum=articleList.pageNum; var begin =""; var end ="";


						if(pageNum==1){ begin ="class='am-disabled'"; }else
						if(pageNum==totalPage){ end ="class='am-disabled'"; } %>
						<li ${begin}><a href="${ctxPath}/article/list?pageNum=${pageNum-1}">«</a></li>
						<% for(var i=1;i<=totalPage;i++){ var active=""; if(pageNum==i){
						active="class='am-active'"; } %>


						<li ${active}><a href="${ctxPath}/article/list?pageNum=${i}">${i}</a></li>


						<% } %>
						<li ${end}><a
							href="${ctxPath}/article/list?pageNum=${pageNum+1}">»</a></li>
					</ul>
				</div>
			</div>
			
			<hr />
			<p>注：.....</p>


		</div>
		
		<hr>

	</div>



	<a href="#"
		class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
	<!-- 删除提示 -->
	<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">删除提示</div>
			<div class="am-modal-bd">你，确定要删除这条记录吗？</div>
			<div class="am-modal-footer">
				<span class="am-modal-btn" data-am-modal-cancel>取消</span> <span
					class="am-modal-btn" data-am-modal-confirm>确定</span>
			</div>
		</div>
	</div>



<br/>


	<footer class="blog-footer">
		<div class="farme blog-text-center">© 2017 YeZi Guo Blog</div>
	</footer>

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="${ctxPath}/assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<!--[if lte IE 8 ]>
	<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
	<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
	<![endif]-->
	<script src="${ctxPath}/assets/js/amazeui.min.js"></script>
	<script src="${ctxPath}/assets/js/app.js"></script>
	<script src="${ctxPath}/assets/js/app-blog.js"></script>
	<script src="${ctxPath}/assets/js/jquery.form.min.js"></script>
	
	<script src="${ctxPath}/assets-admin/js/amazeui.min.js"></script>
    <script src="${ctxPath}/assets-admin/js/amazeui.datatables.min.js"></script>
    <script src="${ctxPath}/assets-admin/js/dataTables.responsive.min.js"></script>
    <script src="${ctxPath}/assets-admin/js/app.js"></script>
	
	
	<script type="text/javascript">
		function deleteArticle(id) {
			$('#my-confirm').modal({
				relatedTarget : this,
				onConfirm : function(options) {
					//http://www.runoob.com/
					//http://www.w3school.com.cn/
					$.ajax({
						url : '${ctxPath}/article/delete',
						data : {
							"id" : id
						},
						success : function() {
							window.location.reload(); //刷新页面
						}
					})
				},
				// closeOnConfirm: false,
				onCancel : function() {

				}
			});
		}

		function seek() {
			var typeId = $("#typeId").val();
			var title = $("#title").val();

			window.location.href = "${ctxPath}/article/list?typeId=" + typeId
					+ "&title=" + title;

		}
	</script>
</body>
</html>